<template>
  <!-- 科技人员库管理 -->
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title"></title-name> -->
      <a-row :gutter="10">
        <a-col :span="24">
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :request="loadData"
            :export-config="{ use: true,select: '外部科技人员',all: '外部科技人员', customColumns: customColumns}"
            :export-permission="{select: 'stm_009_exp_06',all: 'stm_009_expall_07'}"
            @select-click="handleChange"
          >
            <template
              slot="prefix"
              slot-scope="ref"
            >
              <a-button
                v-btnPermission="'stm_009_add_01'"
                :loading="addLoading"
                type="primary"
                @click="showAddModal('add')"
              >
                添加人员
              </a-button>
              <a-button 
                v-btnPermission="'stm_009_delall_04'"
                icon="delete"
                type="danger"
                :disabled="selectedRowKeys.length < 1"
                @click="handleRemoveMore">
                移除
              </a-button>
            </template>
            <template
              slot="suffix"
            >
              <export-mould
                v-btnPermission="'stm_009_dow_08'"
                style="margin-left: 5px"
                button-text="标准模板下载"
                template-code="外部科技人员标准表格.xlsx"
                icon="cloud-download"
              />
              <!-- </excel> -->
              <ExcelImportButton
                v-btnPermission="'stm_009_imp_09'"
                :loading="loadingImport"
                :disabled="loadingImport"
                icon="import"
                button-text="批量导入"
                @handleSubmit="handleImport"
              />
            </template>
            <!-- <span
              slot="index"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span> -->
            
            <a-list
              slot="expandedRowRender"
              slot-scope="record"
              item-layout="horizontal"
              :data-source="formatItem(record)"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <div>{{ item }}</div>
              </a-list-item>
            </a-list>
            
            <!-- 表格行操作栏 -->
            <span slot="action" slot-scope="text, record">
              <MoreButton>
                <a v-btnPermission="'stm_009_loo_03'" @click="showAddModal('look', record.id)">查看</a>
                <a-divider v-btnPermission="'stm_009_edi_02'" type="vertical" />
                <a v-btnPermission="'stm_009_edi_02'" @click="showAddModal('edit', record.id)">编辑</a>
                <a-divider v-btnPermission="'stm_009_del_05'" type="vertical" />
                <a
                  v-btnPermission="'stm_009_del_05'"
                  @click="remove(record.id)"
                  >移除</a
                >
              </MoreButton>
            </span>
          </list-table>
          <!-- 操作栏 -->
          <!-- <div class="mb12">
            <a-button
              v-btnPermission="'stm_001_add_01'"
              icon="plus"
              :loading="addLoading"
              class="btn_right"
              type="primary"
              @click="showAddModal('add')"
              >添加人员</a-button
            >
            <a-button
              v-btnPermission="'stm_001_dela_02'"
              :disabled="selectedRowKeys.length < 1"
              icon="delete"
              type="danger"
              @click="handleRemoveMore"
              >移除</a-button
            >
          </div> -->
          <!-- 统计选中项 -->
          <!-- <a-alert :showIcon="true" class="mb12">
            <template slot="message">
              <span style="margin-right: 12px">
                已选择:
                <a>
                  <b>{{ selectedRowKeys.length }}</b>
                </a>
                项
              </span>
            </template>
          </a-alert> -->
          <!-- 表格 -->
          <!-- <s-table
            ref="table"
            tableLayout="fixed"
            size="default"
            :scroll="{ x: 1200 }"
            :rowKey="(record) => record.id"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: handleChange,
            }"
            show-size-changer
            show-quick-jumper
            showPagination="auto"
          > -->
            <!-- 表格行操作栏 -->
            <!-- <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleManage(record)">查看</a>
                <a-divider v-btnPermission="'stm_001_del_04'" type="vertical" />
                <a @click="showAddModal('edit', record.id)">编辑</a>
                <a-divider v-btnPermission="'stm_001_del_04'" type="vertical" />
                <a
                  v-btnPermission="'stm_001_del_04'"
                  @click="remove(record.id)"
                  >移除</a
                >
              </template>
            </span>
            <a-list
              slot="expandedRowRender"
              slot-scope="record"
              item-layout="horizontal"
              :data-source="formatItem(record)"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <div>{{ item }}</div>
              </a-list-item>
            </a-list>
          </s-table> -->
        </a-col>
      </a-row>
    </a-card>
    
    <!-- add modal start -->
    <addModal
      :visible.sync="addModalVisible"
      :modal-type="addModalType"
      :editId="editId"
      @submitForm="search"
    />
      <!-- :form-data="formData"
      @cancelSub="hideAddModal"
      @submitForm="showAddModal" -->
    <!-- add modal end -->
  </base-breadcrumb>
  
</template>

<script>
import ExportMould from '@/components/ExportMould'
import { STable } from '@/components' // 表格
import addModal from './addmodal.vue'
import { getOuterEmployeeList, outerDel, outerDels, outerCreates } from '@/api/science'
const searchArr = [
  // 搜索框
  {
    name: '员工姓名',
    value: 'name',
    type: 'input',
  },
  {
    name: '电话号码',
    value: 'phone',
    type: 'input',
  },
  {
    name: '单位',
    value: 'unit',
    type: 'input',
  },
  {
    name: '职务',
    value: 'jobTitle',
    type: 'input',
  },
  {
    name: '职称',
    value: 'title',
    type: 'input',
  },
  {
    name: '学历',
    value: 'education',
    type: 'input',
  },
  {
    name: '年龄段',
    value: 'age',
    type: 'rangeInput',
    setInitValue: true,
    attr: {
      rangeFormat: ['ageStart', 'ageEnd'],
      min: 0,
      max: 100,
      precision: 0
    }
  }
]
const columns = [
  // {
  //     title: '序号',
  //     width: '80px',
  //     scopedSlots: {customRender: 'index'},
  // },
  {
    title: '员工姓名',
    ellipsis: true,
    width: '120px',
    dataIndex: 'name',
  },
  {
    title: '性别',
    width: '80px',
    dataIndex: 'sex',
  },
  {
    title: '电话号码',
    ellipsis: true,
    dataIndex: 'phone',
    width: '120px',
  },
  {
    title: '职务',
    ellipsis: true,
    width: '150px',
    dataIndex: 'jobTitle',
  },
  {
    title: '单位',
    ellipsis: true,
    width: '150px',
    dataIndex: 'unit',
  },
  // {
  //   title: '职称',
  //   ellipsis: true,
  //   width: '150px',
  //   dataIndex: 'title',
  // },
  {
    title: '最高学历',
    dataIndex: 'education',
    ellipsis: true,
    width: '120px',
  },
  {
    title: '年龄',
    width: '80px',
    dataIndex: 'age',
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    addModal,
    ExportMould
  },
  computed: {
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      addModalVisible: false,
      addModalType: 'add',
      editId: null,
      loading: false,
      addLoading: false,
      visibleResult: false,
      loadingImport: false,
      // 操作类型：0 添加 1 编辑 3 查看
      editModel: 0,
      // 责任区域弹窗控件
      visible: false,
      selectedRowKeys: [], // 表格选项
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      // 弹窗参数
      form: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let that = this
        const requestParameters = Object.assign({}, parameter, that.queryParam)
        return getOuterEmployeeList(requestParameters).then((res) => {
          return res
        })
      },
      result: {}, // 查看参数对象
      boxHeight: 0, // 盒子高度
      personIds: [],
      customColumns: [
        {},
        {title: '姓名',dataIndex: 'name'},
        {title: '性别',dataIndex: 'sex'},
        {title: '电话号码',dataIndex: 'phone'},
        {title: '职务',dataIndex: 'jobTitle'},
        {title: '职称',dataIndex: 'title'},
        {title: '单位',dataIndex: 'unit'},
        {title: '学历',dataIndex: 'education'},
        {title: '出生日期',dataIndex: 'birthDay'},
        {title: '身份证号',dataIndex: 'cardID'},
      ]
    }
  },
  mounted() {
    let that = this
  },
  methods: {
    showAddModal(type, id = null) {
      this.addModalVisible = true;
      this.addModalType = type;
      this.editId = id;
    },
    remove(id) {
      let that = this
      that.$confirm({
        title: '提示',
        content: '确定是否移除？',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          return outerDel(id).then((res) => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success('移除成功！')
              that.$refs.table.getData(null, true)
            }
          })
        },
      })
    },
    // 表格选项改变
    handleChange(selectedRowKeys) {
      const { keys, rows } = selectedRowKeys
      this.selectedRowKeys = keys
    },
    // 过滤表
    formatItem(e) {
      let datas = []
      let title = { birthDay: '生日：', cardID: '身份证：', title: '职称：' }
      for(let i in title) {
        const lable = title[i]
        const value = e[i] || '暂无'
        datas.push(lable + value)
      }
      // for (let index in e) {
      //   let item = e[index]
      //   for (let i in title) {
      //     if (i == index) {
      //       datas.push(title[i] + (e[index] || '暂无'))
      //     }
      //   }
      // }
      return datas
    },
    // 挂载后设置树的高度
    // autoHeight() {
    //   this.$nextTick(() => {
    //     let height = this.$refs.table.$el.getBoundingClientRect().top // 盒子离窗口上边距
    //     this.boxHeight = `calc(100vh - ${height + 68}px`
    //   })
    // },
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
        if (this.queryParam.ageStart != undefined || this.queryParam.ageEnd != undefined) {
          if (this.queryParam.ageStart == undefined || this.queryParam.ageEnd == undefined) {
            this.$message.warn('请输入正确的年龄段')
            return
          }
        }
        if (this.queryParam.ageStart != undefined && this.queryParam.ageEnd != undefined) {
          this.queryParam.age = this.queryParam.ageStart + ',' + this.queryParam.ageEnd
          delete this.queryParam.ageStart
          delete this.queryParam.ageEnd
        }
      }
      this.$refs.table.getData(null, true)
    },
    // 提交表单
    submitForm(e) {
      let that = this
      that.$confirm({
        title: '提示',
        content: '确认添加？',
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return addSciencesList(e).then((res) => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success('添加成功！')
              that.$refs.table.getData(null, true)
            }
          })
        },
      })
    },
    // 移除表格选中项
    handleRemoveMore() {
      const ids = [...this.selectedRowKeys].join(',')
      let that = this
      that.$confirm({
        title: '提示',
        content: '确定是否移除？',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          return outerDels(ids).then((res) => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success('移除成功！')
              that.$refs.table.getData(null, true)
            }
          })
        },
      })
    },
    downLoad() {
      
    },
    /**
     * 导入
     */
    async handleImport(list) {
      console.log('this.loadingImportthis.loadingImport',this.loadingImport)
      try {
        
        if (this.loadingImport) return
        const columns = [
          {title: '*姓名',dataIndex: 'name'},
          {title: '*性别',dataIndex: 'sex'},
          {title: '电话号码',dataIndex: 'phone'},
          {title: '*职务',dataIndex: 'jobTitle'},
          {title: '*职称',dataIndex: 'title'},
          {title: '*单位',dataIndex: 'unit'},
          {title: '最高学历',dataIndex: 'education'},
          {title: '出生日期',dataIndex: 'birthDay'},
          {title: '身份证号',dataIndex: 'cardID'},
          // {title: '年龄段',dataIndex: 'number'},
        ]
        const paramsList = []
        list &&
          list.forEach((item) => {
            const resultItem = {}
            for (let key in item) {
              const target = columns.find((column) => {
                if (column.title === key || column.title ===  ('*'+key)){
                  return column
                }
              })
              if (target) {
                  resultItem[target.dataIndex] = item[key]
              }
              resultItem.sex == '男' ? '0' : '1'
            }
            paramsList.push(resultItem)
          })
        if (!paramsList.length) {
          this.$message.warning('请录入导入数据')
          return false
        }
        let flag = paramsList.every((cItem)=>{
          return cItem.name && cItem.sex;
        })
        if(!flag){
          this.$message.warning('姓名和性别必须');
          return 
        }
        console.log(paramsList,12222)
        this.loadingImport = true;
        outerCreates(paramsList).then(res => {
          this.loadingImport = false;
          if ((res.code === 200) || (res.data?.code === 200)) {
              this.$message.success('导入成功')
              this.$refs.table.getData(null, true)
          }
        }).catch(() => {
          this.loadingImport = false;
        })
      } catch (e) {
        this.loadingImport = false
      }
    },
    // 查看
    handleManage(b) {
      this.$router.push({ path: '/science/employer/detail', query: { id: b.employeeId } })
      // this.$router.push({
      //   name: 'expertEdit',
      //   params: b,
      // })
    },
  },
}
</script>
<style lang="less">
  .export-table .ant-table-fixed-right .ant-table-expanded-row{
    height: 156px;
  }
</style>

